<template>
  <div
    class="multi-screen"
    :class="dialogClassName"
    @mouseenter="newDra"
    @click="selectDialog"
    v-if="multiScreenVisible"
  >
    <div>
      <div class="screen-top">
        <div class="screen-top-close" @click="handClose">
          <img src="@/assets/img/home/icon_close.png" alt="" />
        </div>
        <div class="screen-top-search">
          <el-input v-model="searchModel" placeholder="请输入无人机品牌" @keyup.enter="searchDevice">
            <template #suffix>
              <img src="@/assets/img/screen/icon_search.png" alt="" @click="searchDevice" />
            </template>
          </el-input>
        </div>
        <p class="screen-top-title">
          <span>{{ monitorList.length }}</span
          >在线飞行
        </p>
        <div class="screen-top-page">
          <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :total="total"
          />
        </div>
      </div>
      <div class="screen-con">
        <div class="screen-con-box" v-for="item in nowPageList" :key="item.mission_id">
          <multiScreenItem :itemData="item"></multiScreenItem>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref, watch, nextTick, onUnmounted} from 'vue';
import {useStore} from 'vuex';
import censusApi from '@/api/census.ts';
import multiScreenItem from './multiScreenItem.vue';
import UseDraggable from '@/utils/useDraggableElem';

const multiScreenVisible = ref(false);
const searchModel = ref('');
const monitorList = ref([]); // 列表
const nowPageList = ref<Array>([]); // 当前页多屏列表
const total = ref(0); // 总数
const pageSize = ref<Number>(6); // 每页显示的数量
const nowPage = ref(1); // 当前页
const store = useStore();
let timer = null;

const props = defineProps({
  multiScreenVisible: Boolean,
});

const emit = defineEmits(['handClose', 'closeMultiScreen']);

const handClose = () => {
  emit('closeMultiScreen');
};

watch(
  () => nowPageList.value,
  (newVal) => {
    nowPageList.value = newVal;
  },
);
// 搜索
const searchDevice = () => {
  getOnloneDevice(searchModel.value);
};

// 分页跳转
const handleCurrentChange = (e) => {
  nowPage.value = e;
  nowScreenPage();
};

// 多屏当前页
const nowScreenPage = () => {
  const start = (nowPage.value - 1) * pageSize.value;
  const end = nowPage.value * pageSize.value;
  nowPageList.value = monitorList.value.slice(start, end);
};

// 获取在线设备列表
const getOnloneDevice = (key) => {
  censusApi
    .onloneDevice({brand_name: key})
    .then((res) => {
      monitorList.value = res.data;
      total.value = res.data.length;
      nowScreenPage();
    })
    .catch((err) => {
      throw err;
    });
};

// 拖拽相关
const dialogClassName = ref('dialogClassName');
let draggable;
const setUseDraggable = () => {
  const params = {
    fatherSelector: dialogClassName.value,
  };
  nextTick(() => {
    draggable = new UseDraggable(params);
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
  });
};
const newDra = () => {
  const params = {
    fatherSelector: dialogClassName.value,
  };
  // eslint-disable-next-line no-new
  new UseDraggable(params);
};

const selectDialog = () => {
  try {
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
    store.commit('changeDialogzIndex', 1);
  } catch {}
};
watch(
  () => multiScreenVisible.value,
  (newVal) => {
    if (newVal && draggable !== '') {
      // 元素拖拽
      draggable = setUseDraggable();
    }
  },
);
// 定时器
const timerFn = () => {
  timer = setInterval(() => {
    getOnloneDevice();
  }, 15000);
};

onMounted(() => {
  multiScreenVisible.value = props.multiScreenVisible;
  getOnloneDevice();
  timerFn();
});
onUnmounted(() => {
  clearInterval(timer);
  timer = null;
});
</script>
<style lang="scss" scoped>
.multi-screen {
  position: fixed;
  top: 20%;
  left: 10%;
  width: 80%;
  height: 66%;
  background: url(@/assets/img/screen/screen_bg_big.png) no-repeat;
  background-size: 100% 100%;
  p,
  ul,
  li {
    margin: 0;
  }
  .screen-top {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 124px;
    overflow: hidden;
    &-close {
      position: absolute;
      top: 20%;
      right: 2%;
      width: 20px;
      height: 20px;
      cursor: pointer;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    &-search {
      position: absolute;
      bottom: 5px;
      left: 60px;
      width: 414px;
      height: 36px;
      z-index: 99;
      &:deep(.el-input__wrapper) {
        width: 414px;
        height: 36px;
        background: rgba(140, 156, 220, 0.4);
        box-shadow: none;
        border: 1px solid #7a9ce4;
      }
      &:deep(.el-input__inner) {
        color: #fff;
      }
      &:deep(.el-input__suffix-inner) {
        justify-content: flex-end;
        cursor: pointer;
      }
    }
    &-page {
      position: absolute;
      bottom: 0;
      right: 20px;
      &:deep(.el-pagination) {
        background: none;
      }
      &:deep(.el-pager li) {
        background: none;
      }
      &:deep(.btn-prev) {
        background: none;
        color: #fff;
      }
      &:deep(.number) {
        font-size: 14px;
        color: #fff;
      }
      &:deep(.is-active) {
        background: rgba(140, 156, 220, 0.4);
        border-radius: 2px;
        border: 1px solid #7a9ce4;
      }
      &:deep(.btn-next) {
        background: none;
        color: #fff;
      }
    }
    &-title {
      text-align: center;
      color: #fff;
      opacity: 0.7;
      margin-bottom: 10px;
      > span {
        font-size: 60px;
        color: #16ff73;
        font-weight: bold;
        margin-right: 15px;
      }
    }
  }
  .screen-con {
    color: #fff;
    overflow-y: auto;
    margin-top: 40px;
    padding-left: 60px;
    &-box {
      width: 32%;
      min-width: 405px;
      float: left;
      height: 225px;
      margin: 0 1.3% 1.3% 0;
    }
  }
}
@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .screen-con {
    height: 480px;
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .screen-con-box {
      width: 48%;
      float: left;
      height: 225px;
      margin: 0 2% 2% 0;
    }
  }
  .multi-screen {
    height: 80%;
    .multi-screen {
      background: url(@/assets/img/screen/screen_bg.png) no-repeat;
      background-size: 100% 100%;
    }
    .screen-top-close {
      position: absolute;
      top: 18%;
      right: 2%;
    }
    .screen-top {
      &-title {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
